<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap_v3.css"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/huodong.css"/>
    <link rel="stylesheet" type="text/css" href="css/transtion.css"/>
    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/search.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
  
    <title>or活动</title>
    

  
</head>
<style>
    #jiantou_a:checked ~ul{
            display: flex;
            display: -webkit-flex;
    }
    #left_nav{
                display:none;
    }
    #left_nav:checked~.web_nav{
                /* transform: translateX(0%); */
                display: block;
    }
    #right_search{
                display: none;
        }
        #right_search:checked~.search{
                transform: translateX(0%);
    }
</style>
<body onload="load()">
          <!--loading-->
          <div id="loading">
                        <span>L</span>
                        <span>O</span>
                        <span>A</span>
                        <span>D</span>
                        <span>I</span>
                        <span>N</span>
                        <span>G</span>
                </div>
                <!--loading结束标签-->
        <input type="checkbox" id="left_nav">
        <input type="checkbox" id="right_search">
        <div class="web_nav bounceInLeft">
                <div class="nav_box">
                        <label for="left_nav">
                            <img src="images/close.png">
                        </label>
                        <ul class="ui">
                            <li><img src="images/xinlang2.png"></li>
                            <li><img src="images/wechat2.png"></li>
                            <li><img src="images/baidu2.png"></li>
                            <li><img src="images/xiangji2.png"></li>
                        </ul>
                        <ul class="daohang">
                                        <a href="about.html">About Or</a>
                                        <a href="canpin.html">Product</a>
                                        <a href="admin.html">Space Inspiration</a>
                                        <a href="huodong.html">User Experience</a>
                        </ul>
                        <ul class="line_content">
                                <li class="one">news</li>
                                <li class="two">event</li>
                                <li class="three">contact</li>
                        </ul>
                </div>
        </div>
        <div class="search">
                <div class="r_eturn">
                        <label for="right_search">
                            <img src="images/return.png">
                        </label>
                        <span>Return</span>
                </div>
                <input type="text" placeholder="搜索" autofocus>
                <p>Searh anything & hit enter</p>
        </div>
    <div class="web">
        <header>
                <label for="left_nav" class="left">
                 
                        <span></span>
                        <span></span>
                        <span></span>
                  
                </label>
                <a href="index.html" class="logo">
                        <img src="images/logo2_03.jpg">
                   </a>
                  <label for="right_search" class="right">
                        <img src="images/sousuo.png">
                  </label>  
            </header>
            <div class="content">
                    <div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
                            <!-- Indicators -->
                     
                        
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner img_box" role="listbox">
                            <div class="item active banner_img">
                                <img src="images/hd1_03.jpg" alt="...">
                            </div>
                                  <!-- Controls -->
                                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                        </a>
                            
                            </div>
                        
                    </div>
                    <div class="box">
                            <h4>Brain Dead's Sheds Light on How to Build a Time Honored Brand</h4>
                            <p>“Sometimes pteople buy into the hype and just keep spoon feeding the world the same shit.”</p>
                            <p>Amidst the countless number of clothing brands that exist today, there is no label quite like the one conjured by Kyle Ng and Ed Davis. Brain Dead is madcap, compelling and glowers att those who don’t stray off the beaten path. The brand would be saturnine in human form albeit soaked in mirth and color due to its bastion of disparate influences. Blurring the lines between highbrow and lowbrow are the duo’s graphic T-shirts that glean cult cinema, old record covers, punk rock, DIY culture and even ’80s sex club aesthetics. The brand may not exactly fit one category, but it will sate your appetite in all of its weird, graphic-led glory.</p>
                            <a href="kongjian.html" class="box_img">
                                    <img src="images/hd2_07.jpg">
                            </a>
                            <p class="txt">On building a brand:</p>
                            <p class="txt">Creating a brand is like making a movie. You need to build a world that seems real and authentic. You need to create characters, a soundtrack, a visual language, and a strong storyline to your brand. Just like a movie, if the world you create doesn’t capture your attention then it will fail.</p>
                            <p class="txt">On Brain Dead’s budding success:</p>
                            <p class="txt">Brain Dead has grown in a real organic fashion. I am pleased with the way it’s rolling out. My partner Ed Davis and I created it with the idea that it could be a sandbox where we could create and explore ideas in all facets of culture. I think the fact that we are not trying to go the conventional fashion route, we can capture the attention of some great retailers and customers.</p>

                    </div>
              
                    <div class="bg_img">
                            <img src="images/hd4_10.jpg">
                            <footer>
                                    <p>Copyright (c) Nissin Furniture Crafters Co ,Ltd All Rights Reserved</p>
                                    <div>
                                        <input type="checkbox" id="jiantou_a">
                                       
                                                <ul>
                                                    <li><img src="images/xinlang.png"></li>
                                                    <li><img src="images/wechat.png"></li>
                                                    <li><img src="images/baidu.png"></li>
                                                    <li><img src="images/xiangji.png"></li>
                                                </ul>
                                       
                                        <label for="jiantou_a">
                                                 <span><img src="images/jiantou.png"></span>
                                        </label>
                                    </div>
                            </footer>
                    </div>
            </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script>
  
    /*动态改变根元素字体大小*/
    function recalc() {
        var clientWidth = document.documentElement.clientWidth;
        if(!clientWidth) return;
        document.documentElement.style.fontSize = 40 * (clientWidth / 1920) + 'px';
    }
    
    function initRecalc() {
        recalc();
        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
        if(!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    }
    initRecalc();
    
     console.log("手机viewportWidth=",document.documentElement.clientWidth);
        //获取viewport宽
        var viewportWidth = document.documentElement.clientWidth;
        console.log(document.documentElement.style.fontSize);

                //loading
                function load(){
      var a= setTimeout("loading.style.transition='opacity 0.3s'",2000)   
      //设置透明度改变的过渡时间为0.3秒
      var b= setTimeout("loading.style.opacity=0",3000)
      //0.5秒后加载动画开始变为透明
      var c= setTimeout("loading.style.display='none'",4000)
      //当透明度为0的时候，隐藏掉它
}
    //logo变小
    var w=$(".content");

    $(w).scroll(function () {

                //$(window).scrollTop()这个方法是当前滚动条滚动的距离

                //$(window).height()获取当前窗体的高度

                //$(document).height()获取当前文档的高度

                //var bot =15; //bot是底部距离的高度
                var logo = document.querySelector(".logo");
                var clientWidth = document.documentElement.clientWidth;
                if(clientWidth<=768){
                        return
                }else if(($(w).scrollTop()) > ($(w).height() - $(w).height())){
                        logo.style.width = 60 + 'px';
                }else{
                        logo.style.width = 150 + 'px';  
                }
   });
    </script>
  
    
</html>